<template>
  <div class="contents">
    <PanelTitle title="种植标准" />
    <div class="mt" style="height: 20vh;overflow-y: hidden;">
      <table>
        <thead>
          <tr>
            <th style="width: 25%;">品种</th>
            <th style="width: 25%;">生长阶段</th>
            <th style="width: 50%;">作业标准</th>
          </tr>
        </thead>
      </table>
      <LoopScroll :duration="20" style="height: 15vh; overflow-y: hidden;">
        <table >
        <tbody>
          <!-- <tr>
          <td rowspan="2">{{ normData.name }}</td>
          <template v-for="item in normData.operation">
            <td>{{ item.operateName }}</td>
            <td>{{ item.period }}</td>
          </template>
</tr> -->
          <template v-for="(item, index) in normData">
            <tr v-for="(s, i) in item.specStepList" :key="index">
              <td :rowspan="item.specStepList.length" v-if="i == 0" style="width: 25%;">{{ item.varietyName }}</td>
              <td style="width: 25%;">{{ s.name }}</td>
              <td style="width: 50%;">{{ s.rule }}</td>
            </tr>
          </template>
        </tbody>
        </table>
      </LoopScroll>

    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import LoopScroll from '@/components/loopScroll.vue'

let normData = ref({});

onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/gap/promotion/plant/spec/variety/classify",
    method: "get",
    params: { type: 2 },
  });
  normData.value = res.data;

});
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-30);
  }
}

table,
th,
td {
  border: vh(1) solid #2cd7bc;
  border-collapse: collapse;

  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: vh(10);
  text-align: center;

}

table {
  width: vw(344);

  margin: 0 auto;
}

th {
  color: #fff;
  background: rgba(50, 200, 167, 0.45);

  line-height: vh(20);
  padding: vh(9) vw(9);
}

td {
  color: #2cd7bc;
  line-height: vh(14);
  padding: vh(9) vw(9);
}
</style>